<template>
  <div class="searchj-box">
     <div class="row">
   <div class="left">
     <el-icon>
       <Search />
     </el-icon>
     <span>筛选搜索</span>
   </div>
   <div class="right">
     <el-button @click="">重置</el-button>
     <el-button type="primary" @click="queryUserList">查询搜索</el-button>
   </div>
 </div>
 <el-form>
     <div class="Search-criteria">
     <el-form-item label="广告名称:" style="padding-left: 30px;">
         <el-input  placeholder="广告名称" style="width: 200px;" />
     </el-form-item>   
     <el-form-item label="广告位置:" style="padding-left: 30px;">
        <el-select  class="m-2" placeholder="全部" >
          <el-option value="0" label="PC首页轮播"></el-option>
          <el-option value="1" label="APP首页轮播"></el-option>
        </el-select>
     </el-form-item>  
     <el-form-item label="结束时间:" style="padding-left: 30px;">
        <el-date-picker
          type="date"
          label="Pick a date"
          placeholder="请选择时间"
          style="width: 100%"
        />
        </el-form-item> 
 </div>
 </el-form> 
</div>
 <div class="add-area">
   <div class="text"><el-icon><Tickets /></el-icon><span>数据列表</span></div>
   <el-button type="primary"   >选择品牌</el-button>
 </div>
<el-table
ref="multipleTableRef"
:data="list"
style="width: 100%"
@selection-change=""
border 
cell-class-name="align-c"
>
<el-table-column type="selection" width="55" />
<el-table-column label="编号" prop="id" align="center"/>
<el-table-column label="广告名称" prop="name" align="center"/>
<el-table-column label="广告位置" prop="type" align="center">
  <template #default="{ row }">
    {{ row.type==1?'APP首页轮播':'PC首页轮播' }}
  </template>
</el-table-column>
<el-table-column label="广告图片" prop="pic" align="center">
  <template  #default="{ row }">
    <div class="imgs">
      <el-image style="width: 100px; height: 100px" :src="row.pic" fit="fill" />
    </div>
  </template>
</el-table-column>
<el-table-column label="时间"  align="center" width="280px">
  <template #default="{row}" >
    <div>
      开始时间{{formateDate(row.startTime)  }}
    </div>
    <div>
      到期时间{{ formateDate(row.endTime) }}
    </div>
  </template>
</el-table-column>
<el-table-column label="线上/线下" prop="status" align="center">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"  />
      </template>
    </el-table-column>

<el-table-column label="点击次数" prop="clickCount" align="center"/>
<el-table-column label="生产订单" prop="orderCount" align="center" />

<el-table-column label="操作" width="200px" align="center">
   <template #default="{ row }">
     <el-button text type="primary"  size="small">设置排序</el-button>
       <el-button text type="primary"  size="small">删除</el-button>
   </template>
 </el-table-column>
</el-table>

<div class="page">
  <div class="left">
  <el-select  class="m-2" placeholder="批量操作" >
  <el-option value="2" label="删除"></el-option>
</el-select>
<span class="pad-left">
<el-button type="primary">确定</el-button>

</span>
</div>
 <ElConfigProvider :locale="zhCn">
   <div class="">
     <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
       :page-sizes="[5, 10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
       @size-change="queryUserList" @current-change="queryUserList" />
   </div>
  </ElConfigProvider>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { getAdvertiseList,SwitchRecommendStatus } from "./api";
import { Search,Tickets } from "@element-plus/icons-vue"
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { formateDate } from '@/utils'


const switchStatue=(row:any)=>{
  ElMessageBox.confirm("是否要修改该状态??", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        SwitchRecommendStatus(row.id!,row.recommendStatus).then((res)=>{
      if(res.code===200){
        ElMessage.success("修改成功")
      }else{
        row.recommendStatus= row.recommendStatus===1?0:1
      }
    }).catch(()=>{
      row.recommendStatus= row.recommendStatus===1?0:1
    })
      })
      .catch(() => {
        ElMessage('取消操作')
        row.recommendStatus= row.recommendStatus===1?0:1
      });
  }

const showDialog = ref(false);
const closeDialog = (isReload?: boolean) => {
showDialog.value = false;
if (isReload) queryUserList();
};

const queryParams = reactive<NewProductParams>({
pageNum: 1,
pageSize: 5,
total:0,
})





const list = ref<NewProductModel>();
const total = ref(0)

const queryUserList = () => {
  getAdvertiseList(queryParams).then((res) => {
   if (res.code === 200) {
    console.log(res.data.list);

    list.value=res.data.list
    total.value = res.data.total
    
   }
 });
};
queryUserList()
</script>
<style lang="less" scoped>
.searchj-box {
 box-shadow: 0 0 4px #ccc;
 border-radius: 10px;
 padding: 20px;
 margin-bottom: 20px;
 .Search-criteria{
     display: flex;
 }

 .row {
   padding: 20px 0;
  display: flex;


   &:first-child {
     justify-content: space-between;
   }

   &:last-child {
     width: 400px;

     span {
       width: 100px;
     }
   }
 }
}

.page {
 padding: 30px;
 display: flex;
 justify-content: space-between;
 .pad-left{
  margin-left: 15px;
 }
}

:deep(.align-c) {
 .cell {
   text-align: center !important;
 }
}
.add-area {
 display: flex;
 justify-content: space-between;
 padding: 20px;
 margin-bottom: 20px;
 box-shadow: 0 0 4px #ccc;
 border-radius: 10px;
 .text{
   display: flex;
   align-items: center;
   span{
     padding-left: 10px;
   }
 }
}
.imgs{
  width: 100px;
  height: 100px;
}
</style>
